<template>
  <div class="exhibition-overview">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">展会概览</h1>
        <p class="page-subtitle">了解FAIR plus机器人全产业链接会的整体概况</p>
      </div>
    </div>

    <div class="container">
      <!-- 展会基本信息 -->
      <section class="overview-section">
        <h2 class="section-title">展会基本信息</h2>
        <div class="overview-content">
          <div class="overview-card">
            <div class="overview-icon">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="overview-info">
              <h3>展会时间</h3>
              <p>2025年3月15日 - 3月18日</p>
              <span>共4天</span>
            </div>
          </div>
          
          <div class="overview-card">
            <div class="overview-icon">
              <el-icon><Location /></el-icon>
            </div>
            <div class="overview-info">
              <h3>展会地点</h3>
              <p>深圳会展中心</p>
              <span>广东省深圳市福田区</span>
            </div>
          </div>
          
          <div class="overview-card">
            <div class="overview-icon">
              <el-icon><Shop /></el-icon>
            </div>
            <div class="overview-info">
              <h3>展商规模</h3>
              <p>预计500+家展商</p>
              <span>来自全球20+个国家</span>
            </div>
          </div>
          
          <div class="overview-card">
            <div class="overview-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="overview-info">
              <h3>观众规模</h3>
              <p>预计50,000+专业观众</p>
              <span>覆盖机器人全产业链</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 展会亮点 -->
      <section class="highlights-section">
        <h2 class="section-title">展会亮点</h2>
        <div class="highlights-content">
          <div class="highlight-item" v-for="highlight in highlights" :key="highlight.id">
            <div class="highlight-icon">
              <el-icon><component :is="highlight.icon" /></el-icon>
            </div>
            <div class="highlight-info">
              <h3>{{ highlight.title }}</h3>
              <p>{{ highlight.description }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 展区规划 -->
      <section class="zones-section">
        <h2 class="section-title">展区规划</h2>
        <div class="zones-content">
          <div class="zone-item" v-for="zone in exhibitionZones" :key="zone.id">
            <div class="zone-header">
              <h3>{{ zone.name }}</h3>
              <span class="zone-area">{{ zone.area }}</span>
            </div>
            <p class="zone-description">{{ zone.description }}</p>
            <div class="zone-features">
              <span v-for="feature in zone.features" :key="feature" class="feature-tag">
                {{ feature }}
              </span>
            </div>
          </div>
        </div>
      </section>

      <!-- 展会数据 -->
      <section class="stats-section">
        <h2 class="section-title">往届展会数据</h2>
        <div class="stats-content">
          <div class="stat-item" v-for="stat in statistics" :key="stat.id">
            <div class="stat-number">{{ stat.number }}</div>
            <div class="stat-label">{{ stat.label }}</div>
            <div class="stat-trend" :class="stat.trend">
              {{ stat.trendText }}
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { 
  Calendar, 
  Location, 
  Shop, 
  User, 
  Trophy, 
  Connection, 
  VideoPlay, 
  Star 
} from '@element-plus/icons-vue'
import { subpageApi } from '@/api/user'

export default {
  name: 'ExhibitionOverview',
  components: {
    Calendar,
    Location,
    Shop,
    User,
    Trophy,
    Connection,
    VideoPlay,
    Star
  },
  setup() {
    const highlights = ref([])
    const exhibitionZones = ref([])
    const statistics = ref([])

    // 加载展会亮点数据
    const loadHighlights = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('about', 'exhibition-highlights')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              highlights.value = contentData.highlights || []
            } catch (e) {
              console.error('解析展会亮点数据失败:', e)
              highlights.value = []
            }
          } else {
            highlights.value = []
          }
        } else {
          highlights.value = []
        }
      } catch (error) {
        console.error('加载展会亮点数据失败:', error)
        highlights.value = []
      }
    }

    // 加载展区规划数据
    const loadExhibitionZones = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('about', 'exhibition-zones')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              exhibitionZones.value = contentData.zones || []
            } catch (e) {
              console.error('解析展区规划数据失败:', e)
              exhibitionZones.value = []
            }
          } else {
            exhibitionZones.value = []
          }
        } else {
          exhibitionZones.value = []
        }
      } catch (error) {
        console.error('加载展区规划数据失败:', error)
        exhibitionZones.value = []
      }
    }

    // 加载展会统计数据
    const loadStatistics = async () => {
      try {
        const response = await subpageApi.getSubpageByKey('about', 'exhibition-statistics')
        if (response && response.code === '200' && response.data) {
          const data = response.data
          if (data.content) {
            try {
              const contentData = JSON.parse(data.content)
              statistics.value = contentData.statistics || []
            } catch (e) {
              console.error('解析展会统计数据失败:', e)
              statistics.value = []
            }
          } else {
            statistics.value = []
          }
        } else {
          statistics.value = []
        }
      } catch (error) {
        console.error('加载展会统计数据失败:', error)
        statistics.value = []
      }
    }

    onMounted(() => {
      loadHighlights()
      loadExhibitionZones()
      loadStatistics()
    })

    return {
      highlights,
      exhibitionZones,
      statistics
    }
  }
}
</script>

<style scoped>
.exhibition-overview {
  min-height: 100vh;
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 内容区域样式 */
.overview-section,
.highlights-section,
.zones-section,
.stats-section {
  margin: 80px 0;
  padding: 60px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 50px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 展会基本信息样式 */
.overview-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.overview-card {
  display: flex;
  align-items: center;
  padding: 30px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.overview-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #320063;
  margin-right: 20px;
  flex-shrink: 0;
}

.overview-info h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #ffd700;
}

.overview-info p {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 5px;
  color: white;
}

.overview-info span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* 展会亮点样式 */
.highlights-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  padding: 30px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.highlight-item:hover {
  transform: translateX(10px);
}

.highlight-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #320063;
  margin-right: 20px;
  flex-shrink: 0;
}

.highlight-info h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #ffd700;
}

.highlight-info p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* 展区规划样式 */
.zones-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.zone-item {
  padding: 30px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.zone-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.zone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.zone-header h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffd700;
}

.zone-area {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #320063;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
}

.zone-description {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}

.zone-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feature-tag {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 展会数据样式 */
.stats-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.stat-item {
  text-align: center;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: scale(1.05);
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.stat-label {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 10px;
}

.stat-trend {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 15px;
}

.stat-trend.up {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.stat-trend.down {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .page-subtitle {
    font-size: 1rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .overview-content,
  .highlights-content,
  .zones-content {
    grid-template-columns: 1fr;
  }

  .stats-content {
    grid-template-columns: repeat(2, 1fr);
  }

  .overview-card,
  .highlight-item {
    padding: 20px;
  }

  .overview-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-right: 15px;
  }

  .highlight-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    margin-right: 15px;
  }

  .stat-number {
    font-size: 2.5rem;
  }

  .zone-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style> 